<template>
 <div>
     <nav-bar>
         <template v-slot:center>
             <p class="nav_p">购物车 ( {{ cartShopping }} )</p>
         </template>
     </nav-bar>
     
     <!-- 商品的列表 -->
        <ul class="ul">    
         <li :key="item" v-for="item in $store.state.cartShopping">
             <div class="check-button">
                <check-button @click="checkedChange" :is-change="$store.state.cartShopping.change" />
            </div>
             {{ item }}
         </li>
        </ul>
     <!-- 底部汇总 -->
     
     
 </div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar'
import CheckButton from '@components/content/checkButton/CheckButton'

export default({
    name:'Cart',
    data(){
        return {
            
        }
    },
    components:{
        NavBar,
        CheckButton
    },
    computed:{
        cartShopping(){
            return this.$store.state.cartShopping.length
        }
    },
    methods:{
        checkedChange(){
            /* 取反 */
            this.$store.state.cartShopping.change = !this.$store.state.cartShopping.change
        }
    }
})

</script>

<style scoped>
.nav_p{
    position: fixed;
    background-color: #fff;
    top: 0;
    left: 0;
    right: 0;
}
.ul{
    height: calc(100% - 44px);
    overflow: scroll;
}
.ul li{
    width: 100%;
    height: 300px;
    border: 1px solid red;
}
.check-button{
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid yellow;
}
</style>
